import React, { useState, useEffect } from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";

function App() {
  // 计数器
  const [count, setCount] = useState(0)
  // 第一个页面
  function Page1() {
    useEffect(()=>{
      console.log("进入了第一个界面");
    })
    return <h2>页面一</h2>;
  }
  // 第二个页面
  function Page2() {
    useEffect(()=>{
      console.log("进入了第二个界面");
      return ()=>{
        console.log("离开了第二个界面");
      }
    })
    return <h2>页面二</h2>;
  }

  return (
    <div>
      <h1>首页</h1>
      <div>次数:{count}</div>
      <button onClick={()=>{setCount(count + 1)}}>增加次数</button>
      <BrowserRouter>
        <ul>
          <li>
            <Link to="/page1">页面一</Link>
          </li>
          <li>
            <Link to="/page2">页面二</Link>
          </li>
        </ul>
          <Route path="/page1" component={Page1} />
          <Route path="/page2" component={Page2} />
      </BrowserRouter>
    </div>
  );
}
export default App;
